﻿{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{% static 'login/img/333.jpg' %}">

    <title>注册</title>

    <!-- Bootstrap 核心CSS文件 -->
    <link href="{% static 'login/css/bootstrap.min.css' %}" rel="stylesheet">

    <style type="text/css">
        body{
          background: url("{% static 'login/img/111.jpg' %}")  no-repeat center;
          background-size: cover;
          width: 100%;
        }
        .fa{display: inline-block;top: 27px;left: 6px;position: relative;color: #ccc;}
        input[type="text"],input[type="password"]{padding-left:26px;}
        #checkbox{padding-left:21px;}
        
        .form-signin-heading{
            text-align: center;
            font-size: 40px;
            color: #337ab7;
            display: inline-block;    
            margin:80px auto 35px;
        }
        a{
        	color: #000;
        }

        .tabbable{
            background: rgba(255,255,255,0.1);
        }
        .tab-pane{
            width: 300px;
        }
        /*#video2{
        	
        }*/
        .fl{
            float: left;
        }
        .fr{
        	float: right;
        }
        .fx{
            float: fixed;
        }
        .cl{
            clear: both;
        }
    </style>
  </head>

  <body>

    <div class="container">
      <div class="row">
        <div class="col-md-1">
            
        </div>
        <div class="col-md-10 login_box">
          
        <span class="form-signin-heading">注册系统</span>

        <div class="tabbable" id="tabs-142713">

            <ul class="nav nav-tabs">
                <li class="active">
                    <a href="#panel-71949" data-toggle="tab" contenteditable="false">账号注册</a>
                </li>
            </ul>
            <div class="tab-content">
                
                <form class="form-signin" action="{% url 'login:register_yunsuan' %}" method="post">
                    {% csrf_token %}
                    
                    <div>
                        <canvas class="fl" id="canvasCemara" width="350" height="262"></canvas>
                        <video class="fr" autoplay="" id="video2" style="width:350px;height:262px;"></video>
                        <center>
                        <input type="button" class="btn btn-info btn-lg fx" name="" id="btn2" style="margin: 0 40px 0 0;display:none;" value="注册" >
                        <button type="button" id='btn' class="btn btn-success btn-lg fx" style="margin: 0 0 0 40px;display:none;" onclick="photo()">拍摄</button>
                        <input type="hidden" name="img64" id="img_inp">
                        </center>
                        <script>
                        var video = document.getElementById('video2');
                        var constraints = {audio: false, video: true};
                        function successCallback(stream) {
                         video.srcObject = stream;
                         video.play();
                        }
                        function errorCallback(error) {
                         console.log("navigator.getUserMedia error: ", error);
                         $(".CameraTips").show();
                        }
                        function openVideo(){
                        navigator.mediaDevices.getUserMedia(constraints)
                         .then(successCallback)
                         .catch(errorCallback);
                         document.getElementById("btn").style.display="inline-block";
                         
                        }
                       
                        document.getElementById("btn").addEventListener("click", function () {
                        var video = document.getElementById('video2');
                        canvas = document.getElementById('canvasCemara');
                        ctx = canvas.getContext('2d');
                        var _w = 350, _h = 250;
                        if (video.videoWidth > 0) _h = video.videoHeight / (video.videoWidth / _w);
                        canvas.setAttribute('width', _w);
                        canvas.setAttribute('height', _h);
                        ctx.fillRect(0, 0, _w, _h);
                        ctx.drawImage(video, 0, 0, _w, _h);
                        });
                        function photo(){
                            document.getElementById("btn2").addEventListener("click", function () {
                            var img_data=document.getElementById("canvasCemara");
                            var img_base=img_data.toDataURL("image/jpeg");
                            document.getElementById("img_inp").value=img_base;
                            
                            })
                            document.getElementById("btn2").style.display="inline-block";
                            document.getElementById("btn2").type="submit";
                        }
                        </script>
                    </div>
                    <center>
                    <div class="tab-pane active" id="panel-71949">
                               
                        <div class="cl">
                            
                        </div>
                        {% if message %}
                            <a href="{% url 'login:login' %}"><button type="button" class="btn btn-primary btn-lg">点此进入{{permission}}主页面(<font id="f1"></font>秒后自动进入)</button></a>
                            <h4 style="color: red;">{{message}}</h4>
                        {% endif %}
                        <label for="inputInfo" class="sr-only">姓名：</label>
                        <input type="text" name="userinfo" id="inputInfo" class="form-control" placeholder="输入姓名:" required autofocus>
                        <i class="fa fa-lock fa-lg"></i>
                        <label for="inputGrade" class="sr-only">班级：</label>
                        <input type="text" name="usergrade" id="inputGrade" class="form-control" placeholder="输入班级:" required>
                        <i class="fa fa-lock fa-lg"></i>
                        <label for="inputName" class="sr-only">账号：</label>
                        <input type="text" name="username" id="inputName" class="form-control" placeholder="账号:只能是数字长度9位" required autofocus maxlength="9" oninput="value=value.replace(/[^\d]/g,'')">
                        <i class="fa fa-lock fa-lg"></i>
                        <label for="inputPassword" class="sr-only">密码：</label>
                        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="输入密码:最长15位" required maxlength="15">
                        <i class="fa fa-lock fa-lg"></i>
                        <label for="inputPassword" class="sr-only">密码：</label>
                        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="再次输入密码" required maxlength="15">
                        <i class="fa fa-lock fa-lg"></i>
                        <button class="btn btn btn-primary btn-block" type="button" onclick="openVideo()">人脸注册</button>
                    </div>
                    </center>
                </form>
            </div>
        </div>  
    
    </div>
        <div class="col-md-1">
        	
					
        </div>
        </div>
    </div>
    {% if message_n %}
    <script type="text/javascript">     
        
        i = 5;
        var xx = window.setInterval(tt,1000);
        function tt(){
            document.getElementById('f1').innerHTML = i;
            i--;
            if(i==0){
                window.clearInterval(xx);
                window.location.href='{% url 'login:login' %}'
            }
        }
    </script>
    {% endif %}
    <!-- jquery部分： -->
    <script type="text/javascript" src="{% static 'login/js/jquery-3.3.1.min.js' %}"></script>
    <!-- Bootstrap部分： -->
    <script type="text/javascript" src="{% static 'login/js/bootstrap.min.js' %}"></script>    
  </body>
</html>
